<template>
  <div class="painting-detail">
    <div class="painting-info-item">
      <div class="painting-header">
        <img class="avatar" :src="painting.user.avatar" alt="" />
        <div class="info-wrapper">
          <p class="name">{{ painting.user.nickname }}</p>
          <p class="title">{{ painting.user.title }}</p>
        </div>
        <span class="more">...</span>
      </div>
      <p class="painting-desc">{{ painting.text }}</p>
      <image-previewer :images="painting.attachments"></image-previewer>
      <div class="painting-footer">
        <span class="painting-date">{{ painting.dateStr }}</span>
        <div class="painting-action" @click="favoriteAction">
          <img v-if="painting.is_favorite" src="../../assets/icon/icon_star_selected.png" alt="" />
          <img v-else src="../../assets/icon/icon_star.png" alt="" />
          <span>收藏 {{ painting.favorite_count }}</span>
        </div>
        <div class="painting-action" @click="likeAction">
          <img v-if="painting.is_like" src="../../assets/icon/icon_like_selected.png" alt="" />
          <img v-else src="../../assets/icon/icon_like.png" alt="" />
          <span>已赞 {{ painting.like_count }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import ImagePreviewer from '@/components/imagePreviewer'

Vue.component(ImagePreviewer.name, ImagePreviewer)

// 作品详情
export default {
  name: 'paintingDetail',
  data () {
    return {
      id: this.$route.params.id,
      painting: this.$route.params.painting
    }
  },
  created () {
    if (typeof(this.painting) == 'undefined') {
      this.getPainting()
    }
  },
  methods: {
    getPainting() {
      var url = '/works/' + this.id + '/'
      var that = this
      // 调用登陆接口
      this.axios.get(url)
      .then(function (res) {
        if (res.status === 200) {
          that.painting = res.data
        }
      })
      .catch(function (error) {
        console.log(error)
      })
    },
    favoriteAction: function() {
      var that = this
      var url = '/works/' + this.painting.id + '/favorite/'
      if (this.painting.is_favorite) {
        url = '/works/' + this.painting.id + '/unfavorite/'
      }
      this.axios.post(url)
      .then(function(res) {
        if (res.status >= 200 && res.status < 300) {
          if (that.painting.is_favorite) {
            that.painting.favorite_count --
          } else {
            that.painting.favorite_count ++
          }
          that.painting.is_favorite = !that.painting.is_favorite
        } else {
          return that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.fail('请求出错')
      })
    },
    likeAction: function() {
      var that = this
      var url = '/works/' + this.painting.id + '/like/'
      if (this.painting.is_like) {
        url = '/works/' + this.painting.id + '/unlike/'
      }
      this.axios.post(url)
      .then(function(res) {
        if (res.status >= 200 && res.status < 300) {
          if (that.painting.is_like) {
            that.painting.like_count --
          } else {
            that.painting.like_count ++
          }
          that.painting.is_like = !that.painting.is_like
        } else {
          return that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.fail('请求出错')
      })
    }
  }
}

</script>
